<template>
  <div id="singerDetail">
    <transition name="fade">
      <loading v-show="isLoading"></loading>
    </transition>
    <div id="info">
      <div class="info">
        <div class="img">
          <img v-lazy="cover" alt="" />
        </div>
        <div class="nameInfo">
          <div class="name">
            <span>{{ name }}</span>
          </div>
          <div class="briefDesc">
            <span>简介：<span @click="descShow = !descShow">[更多]</span></span>
            <span>{{ briefDesc }}</span>
          </div>
          <transition name="fade">
            <div class="desc" v-show="descShow == true">
              {{ briefDesc }}
            </div>
          </transition>
          <div class="songInfo">
            <div class="song">
              <span class="artIdenti">单曲</span>
              <span class="num">{{ musicSize }}</span>
            </div>
            <div class="album">
              <span class="artIdenti">专辑</span>
              <span class="num">{{ albumSize }}</span>
            </div>
            <div class="mv">
              <span class="artIdenti">mv</span>
              <span class="num">{{ mvSize }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="title">
        <span class="item" v-for="(item, index) in infoList" :key="index">
          <span
            @click="gotoTitle(idItem, index)"
            :class="[titleShow === index ? 'spanActive' : '']"
            >{{ item.value }}</span
          >
        </span>
      </div>
      <div class="content">
        <div class="hot" id="hot">
          <table>
            <tr style="background-color: rgb(251, 251, 253)">
              <th></th>
              <th>歌曲</th>
              <th>歌手</th>
              <th>专辑</th>
            </tr>
            <tr
              v-for="(item, index) in hotList"
              :key="index"
              @mouseover="trShow = index"
              @click="playById(item, index)"
            >
              <td
                :style="{ backgroundColor: trShow === index ? '#f5f5f5' : '' }"
              >
                <span class="no" v-show="index < 9">0{{ index + 1 }}</span>
                <span class="no" v-show="index >= 9">{{ index + 1 }}</span>
              </td>
              <td
                :style="{ backgroundColor: trShow === index ? '#f5f5f5' : '' }"
              >
                <span class="name">{{ item.name }}</span>
                <span v-show="item.alia.length > 0" style="color: #999"
                  >({{ item.alia[0] }})</span
                >
                <!-- <i class="playIcno" alt=""></i> -->
              </td>
              <td
                :style="{ backgroundColor: trShow === index ? '#f5f5f5' : '' }"
              >
                <span v-for="(arItem, arIndex) in item.ar" :key="arIndex">
                  <span class="arName">{{ arItem.name }}</span>
                  <span
                    style="color: #cdcdcd"
                    v-show="arIndex < item.ar.length - 1"
                    >/
                  </span>
                </span>
              </td>
              <td
                :style="{ backgroundColor: trShow === index ? '#f5f5f5' : '' }"
              >
                <span class="album">{{ item.al.name }}</span>
              </td>
            </tr>
          </table>
          <div class="more" v-show="hotShow == true">
            <span @click="allF">查看全部50首 ></span>
          </div>
        </div>
        <div id="album">
          <h2>专辑</h2>
          <div class="albumCont">
            <div class="item" v-for="(item, index) in albumList" :key="index">
              <div class="img">
                <img v-lazy="item.picUrl" alt="" @click="gotoAlbum(item)" />
              </div>
              <div class="name">
                <span>{{ item.name }}</span>
              </div>
              <div class="time">
                <span>{{ item.publishTime }}</span>
              </div>
            </div>
          </div>
          <div class="pages">
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page="pages.current"
              :page-size="pages.size"
              layout="total, prev, pager, next"
              :total="pages.count"
            >
            </el-pagination>
          </div>
        </div>
        <div id="mv">
          <h2>mv</h2>
          <div class="mvCont">
            <div
              class="item"
              v-for="(item, index) in mvList"
              :key="index"
              @mouseover="playShow = index"
              @mouseleave="playShow = false"
            >
              <div class="img">
                <img v-lazy="item.imgurl16v9" alt="" />
              </div>
              <div class="name">
                <span>{{ item.name }}</span>
              </div>
              <transition name="fade">
                <div class="playCount" v-show="playShow === index">
                  <i class="playIcno"></i>
                  <span>{{ item.playCount }}</span>
                </div>
              </transition>

              <div class="time">
                <span>{{ item.publishTime }}</span>
              </div>
              <transition name="fade">
                <div class="play" v-show="playShow === index">
                  <img src="../assets/play.png" alt="" @click="gotoMv(item)" />
                </div>
              </transition>
            </div>
          </div>
          <div class="pages">
            <el-pagination
              background
              @current-change="mvCurrentChange"
              :current-page="mvPages.current"
              :page-size="mvPages.size"
              layout="total, prev, pager, next"
              :total="mvPages.count"
            >
            </el-pagination>
          </div>
        </div>
        <div id="intro">
          <h2>歌手详情</h2>
          <div class="artInfo">
            <div class="brief">
              <div>{{ name }}简介</div>
              <span>{{ briefDesc }}</span>
            </div>
            <div class="item" v-for="(item, index) in introList" :key="index">
              <div class="biaoti">
                <span>{{ item.ti }}</span>
              </div>
              <div class="txt">
                <span :class="[moreShow === index ? '' : 'txtMore']">{{
                  item.txt
                }}</span>
                <span @click="showMore(index)" v-show="moreShow != index"
                  >[更多]</span
                >
              </div>
            </div>
          </div>
        </div>
        <div id="like">
          <h2>相似歌手</h2>
          <div class="likeCont">
            <div class="item" v-for="(item, index) in likeList" :key="index">
              <div class="img">
                <img v-lazy="item.img1v1Url" alt="" @click="gotoDetail(item)" />
              </div>
              <div class="name">
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="goto-top">
      <img
        v-if="btnFlag"
        class="go-top"
        src="../assets/backtop.png"
        @click="backTop"
      />
    </div>
  </div>
</template>

<script>
import loading from "@/components/loading.vue";
export default {
  components: { loading },
  data() {
    return {
      // btnFlag 控制图片显示隐藏
      btnFlag: false,
      // 回到顶部
      scrollTop: null,
      isLoading: true,
      // 分页数据
      pages: {
        count: 0,
        size: 15,
        current: 1,
      },
      // mv分页
      mvPages: {
        count: 0,
        size: 9,
        current: 1,
      },
      // 歌手id
      id: null,
      // 图片
      cover: null,
      //   姓名
      name: null,
      // 简介
      briefDesc: null,
      // 单曲量
      musicSize: null,
      // 专辑量
      albumSize: null,
      // mv量
      mvSize: null,
      // 更多是否显示
      descShow: false,
      // 标题是否显示粗体
      titleShow: 0,
      // 哪一行显示变色
      trShow: false,
      //
      infoList: [
        {
          num: 0,
          value: "热门50首",
        },
        {
          num: 1,
          value: "专辑",
        },
        {
          num: 2,
          value: "MV",
        },
        {
          num: 3,
          value: "歌手详情",
        },
        {
          num: 4,
          value: "相似歌手",
        },
      ],
      // 热门歌曲10首列表
      hotList: [],
      // 全部热门歌曲
      allHotList: [],
      // 热门是否显示全部
      hotShow: true,
      // 专辑列表
      albumList: [],
      // mv列表
      mvList: [],
      // 播放量是否显示
      playIcnoShow: false,
      // 播放键是否显示
      playShow: false,
      // 歌手详情
      introList: [],
      // 详情是否显示全部
      moreShow: false,
      // 相似歌手
      likeList: [],
    };
  },
  methods: {
    // 查看全部50首
    allF() {
      this.hotShow = false;
      this.hotList = this.hotList.concat(this.allHotList);
    },
    // 跳转 锚点定位
    gotoTitle(idItem, index) {
      this.titleShow = index;
      switch (index) {
        case 0:
          idItem = "#hot";
          break;
        case 1:
          idItem = "#album";
          break;
        case 2:
          idItem = "#mv";
          break;
        case 3:
          idItem = "#intro";
          break;
        default:
          idItem = "#like";
          break;
      }
      document.querySelector(idItem).scrollIntoView(true);
      var auchor = this.$el.querySelector(idItem);
      document.body.scrollTop = auchor.offsetTop;
    },
    // 分页
    handleCurrentChange(val) {
      this.$axios({
        url: "/artist/album",
        params: {
          id: this.id,
          limit: this.pages.size,
          offset: (val - 1) * this.pages.size,
        },
      }).then((res) => {
        this.albumList = res.data.hotAlbums;
        this.albumList.forEach((element) => {
          let time = new Date(element.publishTime);
          let year = time.getFullYear(time);
          let month = time.getMonth(time) + 1;
          let day = time.getDate(time);
          if (month >= 0 && month <= 9) {
            month = "0" + month;
          }
          if (day >= 0 && day <= 9) {
            day = "0" + day;
          }
          element.publishTime = year + " - " + month + " - " + day;
        });
      });
    },
    // mv分页
    mvCurrentChange(val) {
      this.$axios({
        url: "/artist/mv",
        params: {
          id: this.id,
          limit: this.mvPages.size,
          offset: (val - 1) * this.mvPages.size,
        },
      }).then((res) => {
        this.mvList = res.data.mvs;
      });
    },
    // 是否显示全部详情
    showMore(index) {
      this.moreShow = index;
    },
    // 新歌播放
    playById(item) {
      this.$axios({
        url: "/song/url",
        params: {
          id: item.id,
        },
      }).then((res) => {
        let url = res.data.data[0].url;
        let data = {
          url,
          name: item.name,
          picUrl: item.al.picUrl,
          alias: item.alia[0],
          arts: item.ar,
        };
        this.$bus.$emit("get-src", data);
      });
    },
    // 跳转至mv详情
    gotoMv(item) {
      this.$router.replace({
        name: "mvDetail",
        query: {
          id: item.id,
        },
      });
    },
    // 跳转至相似歌手详情页
    gotoDetail(item) {
      this.$router.replace({
        name: "singerDetail",
        query: {
          id: item.id,
        },
      });
    },
    // 跳转至专辑详情页
    gotoAlbum(item) {
      this.$router.replace({
        name: "album",
        query: {
          id: item.id,
        },
      });
    },
    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    backTop() {
      const that = this;
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          that.scrollTop + ispeed;
        if (that.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
    },

    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop() {
      const that = this;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
      if (that.scrollTop > 60) {
        that.btnFlag = true;
      } else {
        that.btnFlag = false;
      }
    },
  },
  computed: {
    idItem() {
      if (this.titleShow == 0) {
        return "#hot";
      } else if (this.titleShow == 1) {
        return "#album";
      } else if (this.titleShow == 2) {
        return "#mv";
      } else if (this.titleShow == 3) {
        return "#intro";
      } else {
        return "#like";
      }
    },
  },
  created() {
    this.id = this.$route.query.id;
    // 歌手详情
    this.$axios({
      url: "/artist/detail",
      params: {
        id: this.id,
      },
    }).then((res) => {
      this.isLoading = false;
      this.cover = res.data.data.artist.cover;
      this.name = res.data.data.artist.name;
      this.briefDesc = res.data.data.artist.briefDesc;
      this.musicSize = res.data.data.artist.musicSize;
      this.albumSize = res.data.data.artist.albumSize;
      this.mvSize = res.data.data.artist.mvSize;
      this.pages.count = this.albumSize;
      this.mvPages.count = this.mvSize;
    });

    // 获取热门50首
    this.$axios({
      url: "/artist/top/song",
      params: {
        id: this.id,
      },
    }).then((res) => {
      this.hotList = res.data.songs.slice(0, 10);
      this.allHotList = res.data.songs.slice(11, 50);
    });

    // 获取专辑
    this.$axios({
      url: "/artist/album",
      params: {
        id: this.id,
        limit: 15,
      },
    }).then((res) => {
      this.albumList = res.data.hotAlbums;
      this.albumList.forEach((element) => {
        let time = new Date(element.publishTime);
        let year = time.getFullYear(time);
        let month = time.getMonth(time) + 1;
        let day = time.getDate(time);
        if (month >= 0 && month <= 9) {
          month = "0" + month;
        }
        if (day >= 0 && day <= 9) {
          day = "0" + day;
        }
        element.publishTime = year + " - " + month + " - " + day;
      });

      // 全部mv
      this.$axios({
        url: "/artist/mv",
        params: {
          id: this.id,
          limit: 9,
        },
      }).then((res) => {
        this.mvList = res.data.mvs;
      });

      // 歌手描述
      this.$axios({
        url: "/artist/desc",
        params: {
          id: this.id,
        },
      }).then((res) => {
        this.introList = res.data.introduction;
      });

      // 相似歌手
      this.$axios({
        url: "/simi/artist",
        params: {
          id: this.id,
        },
      }).then((res) => {
        this.likeList = res.data.artists.slice(0, 5);
      });
    });
  },
  mounted() {
    window.addEventListener("scroll", this.scrollToTop);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  },
};
</script>

<style scoped>
@import url("../css/singerDetail");
</style>